<template>
  <div class="permissions-container">
    <div class="app-container">
      <el-card>
        <el-button type="primary" size="small" @click="handleOpen(1,'0')">添加权限</el-button>
        <el-table
          border
          stripe
          style="margin-top: 20px;"
          :data="permList"
          row-key="id"
          default-expand-all
        >
          <!-- :data提供数据源 -->
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template #default="{row}">
              <el-button v-if="row.type===1" type="text" @click="handleOpen(2,row.id)">添加权限点</el-button>
              <el-button type="text" @click="handleOpenEdit(row.id)">编辑</el-button>
              <el-button type="text" @click="delPer(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 新增-->
        <el-dialog :visible="isShow" title="添加权限" @close="isShow = false">
          <!-- 表单内容 -->
          <el-form label-width="100px">
            <el-form-item label="权限名称">
              <el-input v-model="perForm.name" />
            </el-form-item>
            <el-form-item label="权限标识">
              <el-input v-model="perForm.code" />
            </el-form-item>
            <el-form-item label="权限描述">
              <el-input v-model="perForm.description" />
            </el-form-item>
            <el-form-item label="权限启用">
              <!-- 开关组件 -->
              <el-switch
                v-model="perForm.enVisible"
                active-color="#409ff"
                inactive-color="#ccc"
                active-value="1"
                inactive-value="0"
              />
            </el-form-item>
          </el-form>
          <template #footer>
            <div style="text-align: right;">
              <el-button @click="isShow = false">取消</el-button>
              <el-button type="primary" @click="addPermission">确定</el-button>
            </div>
          </template>
        </el-dialog>
        <!-- 编辑 -->
        <el-dialog :visible="isShowshow" title="编辑权限" @close="isShowshow = false">
          <!-- 表单内容 -->
          <el-form label-width="100px">
            <el-form-item label="权限名称">
              <el-input v-model="perForm.name" />
            </el-form-item>
            <el-form-item label="权限标识">
              <el-input v-model="perForm.code" />
            </el-form-item>
            <el-form-item label="权限描述">
              <el-input v-model="perForm.description" />
            </el-form-item>
            <el-form-item label="权限启用">
              <!-- 开关组件 -->
              <el-switch
                v-model="perForm.enVisible"
                active-color="#409ff"
                inactive-color="#ccc"
                active-value="1"
                inactive-value="0"
              />
            </el-form-item>
          </el-form>
          <template #footer>
            <div style="text-align: right;">
              <el-button @click="isShowshow = false">取消</el-button>
              <el-button type="primary" @click="handleEdit">确定</el-button>
            </div>
          </template>
        </el-dialog>

      </el-card>
    </div>
  </div>
</template>

<script>
import { getPermissionAPI, addPermissionAPI, showPermissionAPI, editPermissionAPI, delPermissionAPI } from '@/api/permission'
import { list2Tree } from '@/utils/shift'
export default {
  name: 'PermissionsView',
  data() {
    return {
      // 权限列表
      permList: [],
      // 控制弹框显示隐藏
      isShow: false,
      isShowshow: false,
      // 权限表单
      perForm: {
        name: '',
        code: '',
        description: '',
        enVisible: '1'
      }
    }
  },
  created() {
    this.getPermission()
  },
  methods: {
    // 删除权限
    async delPer(id) {
      try {
        await delPermissionAPI(id)
        this.getPermission()
      } catch (err) {
        this.$message.error(err.message || '操作失败')
      }
    },
    // 编辑权限
    async handleEdit() {
      try {
        const resp = await editPermissionAPI(this.perForm)
        console.log(resp)
        this.$message.success('编辑成功')
        this.isShowshow = false
        this.getPermission()
      } catch (err) {
        this.$message(err.message || '操作失败')
      }
    },
    // 打开编辑弹框
    async handleOpenEdit(id) {
      this.isShowshow = true
      const resp = await showPermissionAPI(id)
      this.perForm = resp.data
    },
    // 获取权限列表
    async getPermission() {
      // 发请求获取列表
      const { data } = await getPermissionAPI()
      // 列表转树形
      this.permList = list2Tree(data, '0')
    },
    // 打开新增弹框
    handleOpen(type, pid) {
      this.isShow = true
      this.type = type
      this.pid = pid
      // type:1=>页面访问权,2->按钮操作权
    },
    // 新增权限点
    async addPermission() {
      await addPermissionAPI({
        ...this.perForm,
        type: this.type,
        pid: this.pid
      })
      this.isShow = false
      this.getPermission()
    }
  }
}
</script>

<style>

</style>

